/**
 * 添加家庭成员页面
 * 提供完整的家庭成员信息录入功能
 * 
 * 功能说明：
 * - 支持就诊人关系、性别、证件类型等字段录入
 * - 使用Picker组件实现移动端友好的选择体验
 * - 表单验证确保数据完整性
 * - 支持真实API和模拟数据双轨运行
 * 
 * @author 项目开发团队
 * @version 1.0.0
 */

import React, { useState } from 'react'
import { Button, Form, Input, Selector, Toast, Radio, Picker } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import TopNavbar from '../../components/TopNavbar'
import styles from './AddMember.module.css'
import { addFamilyMember } from '../../services/familyService'

/**
 * 添加家庭成员页面组件
 * @returns {JSX.Element} 添加成员页面
 */
const AddMember = () => {
  const navigate = useNavigate()                    // 路由导航函数
  const [form] = Form.useForm()                    // 表单实例
  const [loading, setLoading] = useState(false)    // 提交加载状态
  const [relationVisible, setRelationVisible] = useState(false)  // 关系选择器显示状态
  const [idTypeVisible, setIdTypeVisible] = useState(false)      // 证件类型选择器显示状态

  /**
   * 就诊人关系选项配置
   * 用于Picker组件的下拉选择
   */
  const relationOptions = [
    { label: '本人', value: '本人' },
    { label: '配偶', value: '配偶' },
    { label: '子女', value: '子女' },
    { label: '父母', value: '父母' },
    { label: '朋友', value: '朋友' },
    { label: '其他', value: '其他' }
  ]

  /**
   * 证件类型选项配置
   * 用于Picker组件的下拉选择
   */
  const idTypeOptions = [
    { label: '居民身份证', value: '居民身份证' },
    { label: '护照', value: '护照' },
    { label: '港澳通行证', value: '港澳通行证' },
    { label: '台胞证', value: '台胞证' }
  ]

  /**
   * 表单提交处理函数
   * 验证表单数据并调用API添加成员
   * @param {Object} values - 表单数据
   */
  const onFinish = async (values) => {
    setLoading(true)
    try {
      await addFamilyMember(values)
      Toast.show({
        content: '添加成功',
        icon: 'success'
      })
      navigate('/family')
    } catch {
      Toast.show({
        content: '添加失败，请重试',
        icon: 'fail'
      })
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className={styles.page}>
      {/* 顶部导航栏 */}
      <TopNavbar title="添加家庭成员" showBack onBack={() => navigate(-1)} />
      
      <div className={styles.container}>
        {/* 表单组件 - 使用antd-mobile的Form组件 */}
        <Form
          form={form}                    // 表单实例
          onFinish={onFinish}           // 提交处理函数
          layout="horizontal"           // 水平布局
          mode="card"                   // 卡片模式
          footer={
            <Button block type="submit" color="primary" loading={loading}>
              绑定
            </Button>
          }
        >
          <Form.Header>基本信息</Form.Header>
          
          {/* 就诊人关系字段 - 使用Picker选择器 */}
          <Form.Item
            name="relation"
            label="就诊人关系"
            rules={[{ required: true, message: '请选择就诊人关系' }]}
            onClick={() => setRelationVisible(true)}
          >
            <Input placeholder="请选择就诊人关系" readOnly />
          </Form.Item>

          {/* 患者姓名字段 - 文本输入 */}
          <Form.Item
            name="name"
            label="患者姓名"
            rules={[{ required: true, message: '请输入患者姓名' }]}
          >
            <Input placeholder="请输入患者姓名" />
          </Form.Item>

          {/* 性别字段 - 使用Radio单选组 */}
          <Form.Item
            name="gender"
            label="性别"
            rules={[{ required: true, message: '请选择性别' }]}
          >
            <Radio.Group>
              <Radio value="男">男</Radio>
              <Radio value="女">女</Radio>
            </Radio.Group>
          </Form.Item>

          {/* 年龄字段 - 数字输入 */}
          <Form.Item
            name="age"
            label="年龄"
            rules={[{ required: true, message: '请输入年龄' }]}
          >
            <Input placeholder="请输入年龄" type="number" />
          </Form.Item>

          {/* 证件类型字段 - 使用Picker选择器 */}
          <Form.Item
            name="idType"
            label="证件类型"
            rules={[{ required: true, message: '请选择证件类型' }]}
            onClick={() => setIdTypeVisible(true)}
          >
            <Input placeholder="请选择证件类型" readOnly />
          </Form.Item>

          {/* 证件号字段 - 文本输入 */}
          <Form.Item
            name="idNumber"
            label="证件号"
            rules={[{ required: true, message: '请输入证件号' }]}
          >
            <Input placeholder="请输入证件号" />
          </Form.Item>

          {/* 联系电话字段 - 电话输入 */}
          <Form.Item
            name="phone"
            label="联系电话"
            rules={[{ required: true, message: '请输入联系电话' }]}
          >
            <Input placeholder="请输入联系电话" type="tel" />
          </Form.Item>

          {/* 现住址字段 - 文本输入 */}
          <Form.Item
            name="address"
            label="现住址"
            rules={[{ required: true, message: '请输入现住址' }]}
          >
            <Input placeholder="请输入现住址" />
          </Form.Item>
        </Form>
        
        {/* 就诊人关系选择器 - 底部弹出式选择器 */}
        <Picker
          columns={[relationOptions]}                    // 选择器数据源
          visible={relationVisible}                      // 显示状态
          onClose={() => setRelationVisible(false)}      // 关闭回调
          onConfirm={(value) => {                        // 确认选择回调
            form.setFieldValue('relation', value[0])     // 设置表单值
            setRelationVisible(false)                     // 关闭选择器
          }}
        />
        
        {/* 证件类型选择器 - 底部弹出式选择器 */}
        <Picker
          columns={[idTypeOptions]}                      // 选择器数据源
          visible={idTypeVisible}                        // 显示状态
          onClose={() => setIdTypeVisible(false)}        // 关闭回调
          onConfirm={(value) => {                        // 确认选择回调
            form.setFieldValue('idType', value[0])       // 设置表单值
            setIdTypeVisible(false)                       // 关闭选择器
          }}
        />
      </div>
    </div>
  )
}

export default AddMember
